<template>
 <div style="height: 100%">
    <div class="search-con search-con-top">
      <div class="fl">
       <Select v-model="search.module"  placeholder="按板块查询" class="search-150 pin-selsect" clearable>
          <Option :value='item.value' v-for="(item,index) in modules" :key="index">{{item.name}}</Option>
       </Select>
       <Button class="search-btn" type="primary" @click="getBannerList">搜索</Button>
      </div>
      <div class="fr">
        <Button class="search-btn" type="primary" @click="creatNewBanner">添加轮播图</Button>
      </div>
    </div>
    <tables ref="tables"  :border="true" v-model="tableData" :columns="columns" :page="page" @pageSize="changePageSize" @pageNum="changePageNum"/>

    <Modal
        :styles="{top: '40px'}"
        :width="800"
        title="新建轮播"
        v-model="show"
        :scrollable="false"
        :closable="true"
        :mask-closable="true"
        @on-cancel="cancel()"
        class-name="vertical-center-modal">
        <Form ref="banner" :model="banner" :rules="ruleValidate" :label-width="110">
          <FormItem label="标题" >
              <Input v-model="banner.name" placeholder="请输入标题"></Input>
          </FormItem>
          <FormItem label="封面" prop="img">
            <div class="demo-upload-list"  v-if="banner.img">
                <img :src="banner.img">
                <div class="demo-upload-list-cover">
                    <Icon type="ios-eye-outline" @click.native="handleView(banner.img)"></Icon>
                    <Icon type="ios-trash-outline" @click.native="handleRemove()"></Icon>
                </div>
            </div>
            <Upload v-else
                ref="upload"
                :show-upload-list="false"
                :on-success="handleSuccess"
                :format="['jpg','jpeg','png']"
                :max-size="2048"
                :on-exceeded-size="handleMaxSize"
                type="drag"
                action="http://59.110.234.118:9100/uploadImgs/upload?path=admin/other"
                style="display: inline-block;width:58px;">
                <div style="width: 58px;height:58px;line-height: 58px;">
                    <Icon type="ios-camera" size="20"></Icon>
                </div>
            </Upload>
            <Modal title="图片查看" v-model="previmg">
                <img :src="banner.img" v-if="previmg" style="width: 100%">
            </Modal>
          </FormItem>
          <FormItem label="链接" class="require" >
              <!-- <Input v-model="banner.url" placeholder="请输入链接"></Input> -->
              <Select v-model="banner.type" class="search-150 pin-selsect" clearable>
                <Option :value='3'>租赁点 </Option>
                <Option :value='4'>商品</Option>
                <Option :value='2'>加盟店</Option>
                <Option :value='0'>外部链接</Option>
              </Select>
              <!-- 租赁点 -->
              <Select v-model="banner.busId" v-if="banner.type==3" placeholder="选择租赁点" class="search-200 pin-selsect" clearable>
                <Option :value='item.bid' v-for="(item,index) in leaseStore" :key="item.bid">{{item.name}}</Option>
              </Select>
              <!-- 商品 -->
              <Select v-model="banner.busId" v-if="banner.type==4" placeholder="选择商品" class="search-200 pin-selsect" clearable>
                <Option :value='item.gid' v-for="(item,index) in goodsList" :key="item.gid">{{item.name}}</Option>
              </Select>
              <!-- 加盟店 -->
              <Select v-model="banner.busId" v-if="banner.type==2" placeholder="选择加盟店" class="search-200 pin-selsect" clearable>
                <Option :value='item.bid' v-for="(item,index) in businessList" :key="item.bid">{{item.name}}</Option>
              </Select>
              <Input class="" style="display:inline-block;width: 300px" v-if="banner.type==0" v-model="banner.busId" placeholder="请输入链接"></Input>
          </FormItem>
          <FormItem label="所属板块" prop="module">
              <Select v-model="banner.module"  class="search-200 pin-selsect" clearable>
                <Option :value='item.value' v-for="(item,index) in modules" :key="index">{{item.name}}</Option>
                <!-- <Option :value='2'>活动</Option> -->
              </Select>
          </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="cancel()">取消</Button>
        <Button type="primary" size="large" @click="checkForm()">确定</Button>
      </div>
    </Modal>

 </div>
</template>

<script>

 import Tables from "_c/tables";
 import { addBanner , getBanner ,deleteBanner,getAllStores ,getAllGoods,businessB} from '../../api/data'

 export default {
   data () {
     return {
       businessList:[],
         search:{
            module:''
         },
         previmg:false,
         show:false,
         modules:[
             {
                 value:'1',
                 name:'首页'
             },
             {
                 value:'2',
                 name:'租赁品列表'
             },
             {
                 value:'3',
                 name:'加盟店列表'
             },
             {
                 value:'4',
                 name:'商城'
             }
         ],
         banner:{
             id:'',
             name:'',
             img:'',
             url:'',
             module:'',
             type:null
         },
         leaseStore:[],
         goodsStore:[],
         goodsList:[],
         tableData: [],
         page: {
            current: 1,
            total: 0,
            pageSize: 10
         },
         columns:[
            {
                type: "index",
                width: 60,
                align: "center",
                key: ""
            },
            {
                title: "标题",
                key: "name"
            },
            {
                title:'创建时间',
                key:'createtm'
            },
            {
                title: "封面",
                key: "img",
                render: (h, params) => {
                    return h('img', {
                    attrs: {
                        src: params.row.img
                    },
                    style: {
                        width: '60px',
                        height: '60px',
                        margin: '10px 0',
                    }
                    });
                }
            },
            {
                title:'链接地址',
                key:'url',
                render:(h,params)=>{
                  let text = ''
                  switch (params.row.type) {
                    case 3:
                      text = '租赁点'
                      break;
                    case 4:
                      text = '商品'
                      break;
                    case 2:
                      text = '加盟店'
                      break;
                    case 0:
                      text = params.row.busId
                      break;
                    default:
                      break;
                  }
                  return h('div',text)
                }
            },
            {
                title:'所属板块',
                key:'module',
                render:(h, params)=> {
                    let text = ''
                    switch (params.row.module) {
                        case 1:
                            text = '首页'
                            break;
                        case 2:
                            text = '租赁品列表'
                            break;
                        case 3:
                            text = '加盟店列表'
                            break;
                        case 4:
                            text = '商城'
                            break;
                        default:
                            break;
                    }
                    return h('div',text)
                }
            },
            {
               title: '操作',
               key: 'handle',
               button: [
              (h, params, vm) => {
                return [
                  h(
                    "Button",
                    {
                      props: {
                        type: "primary",
                        size: "small"
                      },
                      style: {
                        marginRight: "5px",
                      marginBottom: "5px"
                      },
                      on: {
                        click: () => {
                          let item = JSON.parse(JSON.stringify(params.row))
                          this.banner.module = item.module.toString()
                          this.banner.name = item.name
                          this.banner.img = item.img
                          this.banner.url = item.url
                          this.banner.id = item.id
                          this.banner.type = item.type
                          this.banner.busId = item.busId

                          this.show = true
                          // this.edit(params.row.id)

                        }
                      }
                    },
                    "编辑"
                  )
                ];
              },
              (h, params, vm) => {
                return h(
                  "Poptip",
                  {
                    props: {
                      confirm: true,
                      title: "你确定要删除吗?"
                    },
                    on: {
                      "on-ok": () => {
                        this.deleteBannerFun(params.row.id);
                      }
                    }
                  },
                  [
                    h(
                      "Button",
                      {
                        props: {
                          type: "error",
                          size: "small"
                        },
                        style: {
                          marginRight: "5px",
                      marginBottom: "5px"
                        }
                      },
                      "删除"
                    )
                  ]
                );
              }
          ]
            }
         ],
         ruleValidate:{
          img: [
            {
              required: true,
              message: "封面不能为空",
              trigger: "blur"
            }
          ],
          type: [
            {
              required: true,
              message: "请选择链接",
              trigger: "change"
            }
          ],
          module: [
            {
              required: true,
              message: "请选择位置",
              trigger: "change",
              type:'string'
            }
          ],
       },
     }
   },
   methods: {
      getStores(){
        getAllStores({status:1}).then(res=>{
            let data = res.data
            data.forEach(item => {
              if(item.category == 0){//租赁点
                this.leaseStore.push(item)
              }else if(item.category == 1){//商户
                this.goodsStore.push(item)
              }
            });
        })
      },
      getGoods(){
        getAllGoods({status:1}).then(res=>{
          this.goodsList = res.data
        })
      },
       creatNewBanner(){
         this.List()
           delete this.banner.id
           this.banner.type = null
           this.show = true
       },
       List() {
          businessB({}).then(res => {
            if (res.code==1) {
            this.businessList = res.data;
            }
          });
        },
       getBannerList(){
           getBanner({
               module:this.search.module,
               pageNum:this.page.current,
               pageSize:this.page.pageSize,
            }).then(res=>{
               if(res.code == 1){
                    this.tableData = res.data.data
                    this.page.total = res.data.total
               }
           })
       },
       cancel(){
           this.banner.name = ''
           this.banner.img = ''
           this.banner.url = ''
           this.banner.module = ''
           this.banner.id = ''
           this.banner.type = ''
           this.banner.busId = ''
           this.show = false
           this.$refs['banner'].resetFields()
       },
       checkForm(){
           this.$refs['banner'].validate((valid) => {
              if (valid) {
                  this.save()
              } else {
                  this.$Message.error('请填写完整!');
              }
          })
       },
       save(){
           let options = JSON.parse(JSON.stringify(this.banner))
           if(!options.busId){
              this.$Message.error('请选择链接!');
              return
           }
          //  return
           addBanner(options).then(res=>{
               if(res.code ==1){
                    this.$Message.success('保存成功!');
                   this.show = false
                   this.getBannerList()
                   this.$refs['banner'].resetFields()
               }else{
                    this.$Message.error('请填写完整!');
               }
           })
       },
       deleteBannerFun(id){
            deleteBanner({id:id}).then(res=>{
                if(res.code == 1){
                     this.$Message.success('删除成功!');
                     this.getBannerList()
                }else{
                    this.$Message.error(res.msg);
               }
            })
       },
       handleMaxSize(file) {
            this.$Notice.warning({
                title: "文件超出2M范围"
            });
       },
        handleSuccess(res, file) {
            this.banner.img = res.data;

        },
        handleView() {
           this.previmg = true;
        },
        handleRemove() {
            this.$set(this.banner,'img','')
        },
        changePageSize(val){
            this.page.pageSize = val
            this.getBannerList()
        },
        changePageNum(val){
            this.page.current = val
            this.getBannerList()
        },
   },
   mounted () {
       this.getStores()
       this.getGoods()
       this.getBannerList()
   },
   components: {
       tables: Tables
   }
 }
</script>

<style>
.search-150{
  width: 150px;
}
.search-200{
  width: 200px;
}
.require .ivu-form-item-label::before{
    content: '*';
    display: inline-block;
    margin-right: 4px;
    line-height: 1;
    font-family: SimSun;
    font-size: 12px;
    color: #ed4014;
}
</style>
